<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24HTML5</title>
    <style>
        header,
        nav,
        article,
        footer {
            margin: 0 auto;
            width: 800px;
            height: 120px;
            background: pink;
            border-radius: 15px;
            line-height: 120px;
            text-align: center;
        }
        
        nav,
        footer {
            background: skyblue;
            height: 60px;
            margin: 10px auto;
            line-height: 60px;
        }
        
        section {
            float: left;
            background: tan;
            width: 43%;
        }
        
        aside {
            background: tomato;
            float: right;
            width: 43%;
        }
        
        input::placeholder {
            color: red;
        }
    </style>
</head>

<body>
    <header>头部标签header</header>
    <nav>导航栏nav</nav>
    <article>内容标签article
        <section>定义文档的某个区域section</section>
        <aside>侧边栏aside</aside>
    </article>
    <footer>尾部区域</footer>
    <!-- muted静音播放，解决google浏览器不能自动播放问题;poster加载视频等待封面图片 -->
    <video controls width="320" height="240" autoplay muted loop poster="./study/images/box-bd.png">
        <source src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-1.mp4" type="video/mp4">
        <source src="45.ogg" type="video/ogg">
        您的浏览器不支持video标签
    </video>
    <br>
    <audio controls autoplay muted loop>
        <source src="1.ogg" type="audio/ogg">
        <source src="https://printzy.gitee.io/public/song/会议会场音乐/茶歇.mp3" type="audio/mp3">
        您的浏览器不支持audio标签
    </audio>
    <br>
    <div>
        <!-- 验证表单必须添加form表单，autofocus：自动聚焦 -->
        <form class="" report-submit="false" bindsubmit="" bindreset="">
            <ul>
                <!-- autocomplete="off"：不记录输入的内容 -->
                <li>邮箱：<input type="email" required placeholder="请输入邮箱地址" autofocus autocomplete="off"></li>
                <li>网址：<input type="url"></li>
                <li>日期：<input type="date"></li>
                <li>时间：<input type="time"></li>
                <li>数量：<input type="number"></li>
                <!-- require含义是必须输入，不能为空 -->
                <li>手机号码：<input type="tel" required name="tel" maxlength=11></li>
                <li>搜索：<input type="search"></li>
                <li>颜色：<input type="color"></li>
                <!-- multiple支持多选文件 -->
                <li>选择文件：<input type="file" multiple></li>
                <!-- 点击提交即可进行验证 -->
                <li>提交：<input type="submit"></li>
            </ul>
        </form>
    </div>
</body>

</html>